import { defineComponent, reactive, ref, watch, onMounted, computed } from "vue";
import { PlusSquareOutlined, FormOutlined , DeleteOutlined } from "@ant-design/icons-vue";
import addModel from './model/addModel'
import updateModel from './model/updateModel'
import { API, get , remove } from "@/api";
import "@/assets/less/global.less";
import { notification } from "_ant-design-vue@2.2.8@ant-design-vue";

export default defineComponent({
  components: {
    addModel,
    updateModel,
  },
  setup() {
    const table = {
      title: '小程序管理',
      scored: reactive({
        id: 2,
      }),
      data: ref([]),
      columns: reactive([
        {
          title: "序号",
          dataIndex: "id",
          align: "center",
          key: "id",
        },
        {
          title: "商品名称",
          dataIndex: "goods_name",
          align: "center",
          key: "goods_name",
        },
        {
          title: "商品价格",
          dataIndex: "goods_price",
          align: "center",
          key: "goods_price",
        },
        {
          title: "商品数据",
          dataIndex: "goods_num",
          align: "center",
          key: "goods_num",
        },
        {
          title: "商品图片",
          slots: { customRender: "goods_image" },
          align: "center",
        },
        {
          title: "操作",
          slots: { customRender: "action" },
          align: "center",
        },
      ]),
      slots: {
        table: {
          goods_image: ({ record }: any) => (
            <a-image width={100} height={100} src={"http://localhost:8000/" + record.goods_img} />
          ),
          action: ({ record }: any) => (
            <div class="btns">
              <a-button type="primary" class="w-24" v-slots={{
                icon: () => (<FormOutlined style="font-size:20px;" />)
              }} onClick={() =>model.openModal('updateModel', '编辑商品', record)}>编辑</a-button>
              <a-button type="primary" danger class=" w-24 ml-1.5 " v-slots={{
                icon: () => (<DeleteOutlined style="font-size:20px;" />)
              }} onClick={()=>onRemove(record)}>删除</a-button>
            </div>
          ),
        },
      },
    };

    const onRemove=(record:any)=>{
      remove({
        url: API.goods.product + "/" + record.id,
    }).then((res) => {
        notification["success"]({
            message: "提示",
            description: "修改成功！",
        });
        doRequest();
    });
    }

    const model = {
      name: ref(""),
      title: ref(""),
      data: ref<any>({}),
      show: ref(false),
      onCancel: () => {
        model.show.value = false;
      },
      openModal: (name: string, title: string, data: {}) => {
        model.name.value = name;
        model.title.value = title;
        model.data.value = data;
        model.show.value = true;
      },
      onFinish: () => {
        model.show.value = false;
        doRequest();
      },
    };

    const modalForm = computed(() => {
      switch (model.name.value) {
        case "addModel":
          return (
            <addModel
              onFinish={model.onFinish}
              onClose={() => (model.show.value = false)}
            />
          );
        case "updateModel":
          return (
            <updateModel 
            data={model.data.value}
            onFinish={model.onFinish}
            onClose={() => (model.show.value = false)}
            />
          );
        default:
          return <h1>配置错误</h1>;
      }
    });

    onMounted(() => {
      doRequest()
    })

    const doRequest = () => {
      get({
        url: API.goods.all,
      }).then((res: any) => {
        table.data.value = res.result;
      })
    }

    return () => (
      <div id="home">
        <a-card
          title="商品列表"
          style="width: 96%;margin:auto;margin-top:30px"
          v-slots={{
            extra: () => (
              <a-button type="primary" class=" w-24"
                v-slots={{ icon: () => <PlusSquareOutlined style="font-size:20px;" />, }}
                onClick={() => model.openModal("addModel", "新增商品", {})}
              >添加</a-button>
            ),
          }}>
          <a-table
            columns={table.columns}
            dataSource={table.data.value}
            v-slots={table.slots.table}
            rowKey={(scored: any) => table.scored.id}
            bordered
            pagination={false}
          />
        </a-card>
        <My-Modal
          v-model={[model.show.value, "show"]}
          title={model.title.value}
          width={600}
          form={modalForm.value}>
        </My-Modal>
      </div>
    );
  },
});
